<!DOCTYPE html>
<html>
<head>
	<title>Agregar un producto</title>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<meta name="apple-mobile-web-app-capable" content="yes"/>
	    <meta name="viewport" content = "user-scalable=no, width=device-width"/>
	
	<!-- ESTILOS --->	
	    <link rel="shortcut icon" href="Cliente/Imagenes/favicon.ico"> 
		<link rel="stylesheet" href="Cliente/Scripts/Librerias/jqueryui-1.10.4/css/sunny/jquery-ui-1.10.4.custom.css">
        <link rel="stylesheet" href="Cliente/Estilo/bootstrap.css">        <!--+--->
        <link rel="stylesheet" href="Cliente/Estilo/font-awesome.css">         <!--iconos--->
        <link rel="stylesheet" href="Cliente/Estilo/template.css">     <!--+--->
		<link rel="stylesheet" href="Cliente/Estilo/estructura.css">		
		<link rel="stylesheet" href="Cliente/Estilo/producto.css">	
		<link rel="stylesheet" href="Cliente/Scripts/Librerias/tag-it/css/jquery.tagit.css">
		<link rel="stylesheet" href="Cliente/Scripts/Librerias/tag-it/css/tagit.ui-zendesk.css">
		
		<link type="text/css" rel="stylesheet" media="all" href="Cliente/Estilo/chat.css" />
	
	

	<!-- LIBRERIAS -->		
	<!--script src="Cliente/Scripts/Librerias/modernizr-2.6.1-respond-1.1.0.min.js"></script-->
	<script type="text/javascript" src="Cliente/Scripts/Librerias/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="Cliente/Scripts/Librerias/jqueryui-1.10.4/js/jquery-ui-1.10.4.custom.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
	<script type="text/javascript" src="Cliente/Scripts/Librerias/gmap3.min.js"></script>
	<script src="Cliente/Scripts/Librerias/bootstrap.js"></script>	
	<script src="Cliente/Scripts/Librerias/tag-it/tag-it.js"></script>
	
	<!-- SCRIPTS -->	
	<script type="text/javascript" src="Cliente/Scripts/ajax_facil.js"></script>	
	<script type="text/javascript" src="Cliente/Scripts/map_manager.js"></script>
	<script type="text/javascript" src="Cliente/Scripts/preview_image.js"></script>	
	
	<script language="javascript"> 
		var etiquetas_disponibles = <?=$var['etiquetas_disponibles']?>;	
	</script>
	<script type="text/javascript" src="Cliente/Scripts/alta-producto.js"></script>	
	
</head>
	<body>
		<? include $APP->header;?>
		<div class="todo">
			<div class="container"> 
				<a href="mis-productos" class="volver"><i class="fa fa-arrow-left"></i> Volver a Mis Productos</a>			
				<!--<div class="heading-section col-md-12 text-center">
					<i class="fa fa-cubes"></i><br>
					<h2>Nuevo producto</h2>  
					<p>Complete los datos requeridos
					</p>
				</div> -->
				  
				<div class="col-md-10 col-sm-12 col-xs-12 col-md-offset-1">
					<div class="formulario">  							
						<form id="frmCrear" name="frmCrear" enctype="multipart/form-data" method="POST" action="" >						
							
							<!-- ************************************************ PASO 1 **************************************************************** -->
							<div class="cajaWizard" id="caja1">						
								<div class="tituloPasos"> <span>Pasos</span><img id="pasos" src="Cliente/Imagenes/paso1.png" /></div>
								<div class="tituloDetalle"><i class="fa fa-pencil"></i> Empezá por describirlo! </div>
								
								<div id="combo-tipo-validar" class="verificacion"></div>
								<select name="combo-tipo" id="combo-tipo"> 
									<option value="Seleccione">¿Es un objeto o un servicio? Seleccioná</option> 
									<option disabled>. . . . . . . . . . . . . . . . . . . . . . . . . . . . </option>
									<option value="0"> Objeto</option> 
									<option value="1"> Servicio</option> 
								</select>
								
								<div id="combo-categoria-validar" class="verificacion"></div>
								<select name="combo-categoria" id="combo-categoria"> 
									<option value="Seleccione"> Elegí una categoría para tu producto o servicio</option>															
								</select>									
								
								<div id="nombre-validar" class="verificacion"></div>
								<input type="text" id="txtNombre" name="txtNombre" placeholder="Escribí un título para tu producto o servicio"  />
								
								
								<div class="text-right">
									<button type="button" id="btnSiguiente1" class="botonForm">Siguiente <i class="fa fa-angle-double-right"></i></button>
								</div>								
							</div>
							
							<!-- ************************************************ PASO 2 **************************************************************** -->
							<div class="cajaWizard" id="caja2">
								<div class="tituloPasos"> <span>Pasos</span><img id="pasos" src="Cliente/Imagenes/paso2.png" /></div>
								<div class="tituloDetalle"><i class="fa fa-camera-retro fa-lg"></i> Subí fotos! </div>
								
								<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
								<div class="coment"><i class="fa fa-info-circle"></i> Podés subir hasta 3 fotos de tu producto o servicio y además, elegir cual será la foto principal del producto.</div>
								
								<div id="fotos">
								
								<div class="celda">	
									<div class="custom-input-file">										
										<input type="file" id="fileFoto1" name="fileFoto1" size="1" class="input-file" />
										<i class="fa fa-camera"></i> Seleccionar foto
									</div>
									<div id="btnSubirFoto1" class="botonSubirFoto">
										<div class="previewcanvascontainer">
											<canvas id="previewcanvas1" width="256" height="256"></canvas>
										</div>
									</div><br>
									<input type="radio" id="radFoto1" name="radFotos" value="1" style="width:22px;" checked /> Foto principal
									<button type="button" id="btnBorrarFoto1"><i class="fa fa-times-circle-o"></i> Sin Foto</button>
								</div>							
								
								<div class="celda">
									<div class="custom-input-file">										
										<input type="file" id="fileFoto2" name="fileFoto2" size="1" class="input-file" />
										<i class="fa fa-camera"></i> Seleccionar foto
									</div>
									<div id="btnSubirFoto2" class="botonSubirFoto">
										<div class="previewcanvascontainer">
											<canvas id="previewcanvas2" width="256" height="256"></canvas>
										</div>								
									</div><br>
									<input type="radio" id="radFoto2" name="radFotos" value="2" style="width:22px;" /> Foto principal
									<button type="button" id="btnBorrarFoto2"><i class="fa fa-times-circle-o"></i> Sin Foto</button>
								</div>							
								
								<div class="celda">	
									<div class="custom-input-file">										
										<input type="file" id="fileFoto3" name="fileFoto3" size="1" class="input-file" />
										<i class="fa fa-camera"></i> Seleccionar foto
									</div>
									<div id="btnSubirFoto3" class="botonSubirFoto">
										<div class="previewcanvascontainer">
											<canvas id="previewcanvas3" width="256" height="256"></canvas>
										</div>								
									</div><br>
									<input type="radio" id="radFoto3" name="radFotos" value="3" style="width:22px;" /> Foto principal
									<button type="button" id="btnBorrarFoto3"><i class="fa fa-times-circle-o"></i> Sin Foto</button>
								</div>	
								</div>										
								<div style="clear:both;"></div>
								
								<button type="button" id="btnAnterior1" class="botonForm" style="float:left;"><i class="fa fa-angle-double-left"></i> Anterior</button>
								<button type="button" id="btnSiguiente2" class="botonForm" style="float:right;"> Siguiente <i class="fa fa-angle-double-right"></i></button>								
							</div>	
							
							<!-- ************************************************ PASO 3 **************************************************************** -->
							<div class="cajaWizard" id="caja3">	
							  	<div class="tituloPasos"> <span>Pasos</span><img id="pasos" src="Cliente/Imagenes/paso3.png" /></div>
							    <div class="tituloDetalle"><i class="fa fa-tags"></i> Agrega etiquetas! </div>
							 
							    <div class="coment">Describí a tu producto y/o hace aclaraciones que consideres importante para evitar preguntas repetitivas en el chat.</div>
								<br><br> <span id="letras">200/200 caracteres</span>
								<div id="descripcion-validar" class="verificacion"></div>
								<textarea  id="txtDescripcion" onkeyup="contar(this);" name="txtDescripcion" placeholder="Descripción" ></textarea>
								<br><br><br><br>	
							   
								<div class="coment">Las etiquetas son palabras destacadas que se relacionan a tu producto/servicio. Servirá para que otros usuarios encuentren al mismo en las búsquedas, asi que cuántas más palabras claves completes más fácil encontrarán lo que ofreces.</div>		
                                <br><br>
								<div class="coment"><i class="fa fa-info-circle"></i> Escribí en el recuadro palabras claves separadas por espacio. Ejemplo: mueble bronce mármol  </div>
								<div id="etiqueta-validar" class="verificacion"></div>				
								<ul id="txtEtiqueta"></ul>
								<input name="hidEtiqueta" id="hidEtiqueta" value="" type="hidden">
								<br>
							  							
							   
								<button type="button" id="btnAnterior2" class="botonForm" style="float:left;"><i class="fa fa-angle-double-left"></i> Anterior</button>
								<button type="button" id="btnSiguiente3" class="botonForm" style="float:right;"> Siguiente <i class="fa fa-angle-double-right"></i></button>
							   								
							</div>	
							
							<!-- ************************************************ PASO 4 **************************************************************** -->
							<div class="cajaWizard" id="caja4">
								<div class="tituloPasos"> <span>Pasos</span><img id="pasos" src="Cliente/Imagenes/paso4.png" /></div>
								  <div class="tituloDetalle"><i class="fa fa-globe"></i> Ubicálo en el mapa! </div>
								
								<div class="coment"> No es necesario que seas exacto... Dá a conocer aproximadamente donde entregarías tu producto a la hora de realizar el trueque. Posteriormente podrás arreglar el encuentro con el usuario que realizes el intercambio a través del chat de ICOS. <br><br></div>
								<div class="comentMapa"> <i class="fa fa-map-marker"></i> HACÉ CLICK en el mapa en una zona cercana a la entrega. </div>
							   
								<div id="mapa_ubicacion" class="mapa"></div>
								<input type="checkbox" id="chkDisponible"  name="chkDisponible" style="width:22px;" checked />
								<div class="coment">Destilda esta opción si no quieres que el producto aparezca en las búsquedas (podrás cambiarlo luego).	</div>
								<br>
								<input type="hidden" id="hidUbicacion" name="hidUbicacion" value="" />	
								<div id="ubicacion-validar" class="verificacion"></div>
								 
								<button type="button" id="btnAnterior3" class="botonForm" style="float:left;"><i class="fa fa-angle-double-left"></i> Anterior</button>
								<button type="button" id="btnSiguiente4" class="botonForm" style="float:right;"> Siguiente <i class="fa fa-angle-double-right"></i></button>
							</div>	
							
							<!-- ************************************************ PASO 5 **************************************************************** -->
							<div class="cajaWizard" id="caja5">
								<div class="tituloPasos"> <span>Pasos</span><img id="pasos" src="Cliente/Imagenes/paso5.png" /></div>
								<div class="tituloDetalle"><i class="fa fa-smile-o"></i> Qué deseas a cambio? </div>
								
								<div class="coment">Ahora si querés, describe con las siguientes opciones qué producto deseas a cambio... Recibirás alertas de ICOS!</div>
								<br><br>
								
								<select name="combo-tipo-deseo" id="combo-tipo-deseo"> 
									<option value="Seleccione">¿Deseas a cambio un objeto o un servicio? Seleccioná</option> 
									<option disabled>. . . . . . . . . . . . . . . . . . . . . . . . . . . . </option>
									<option value="0"> Objeto</option> 
									<option value="1"> Servicio</option> 
								</select>
								
								<br><br>
								
								<select name="combo-categoria-deseo" id="combo-categoria-deseo"> 
									<option value="Seleccione">Elige una categoría para el producto o servicio deseado</option>
								</select>
								
								<div class="coment"><i class="fa fa-info-circle"></i> Ingresa en el recuadro palabras claves separadas por espacio, para describir el producto o servicio deseado.... o dejalo vacío si no deseas algo en particular.</div>
								<ul id="txtEtiqueta-deseo"></ul>
								<input name="hidEtiqueta-deseo" id="hidEtiqueta-deseo" value="" type="hidden">
																
								<button type="button" id="btnAnterior4" class="botonForm" style="float:left;"><i class="fa fa-angle-double-left"></i> Anterior</button>
								<button type="button" id="btnGuardar" class="botonForm" style="float:right;" > Guardar</button>
							</div>		
							
						</form>
					</div>
				</div>
				
			</div>
		</div>
		
		<? include $APP->footer;?>
	</body>
</html>